<template>
  <div class="btns flex aic">

    <el-tooltip class="item" content="刷新列表" placement="bottom">
      <div class="item" @click="refreshList">
        <i class="iconfont icon-icon"></i>
      </div>
    </el-tooltip>

    <el-tooltip class="item" content="恢复下载" placement="bottom">
      <div class="item" @click="startAll">
        <i class="iconfont icon-ETL-kaishi"></i>
      </div>

    </el-tooltip>

    <el-tooltip class="item" content="暂停所有" placement="bottom">
      <div class="item" @click="stopAll">
        <i class="iconfont icon-zanting"></i>
      </div>
    </el-tooltip>

    <el-tooltip class="item" content="删除选中项" placement="bottom">
      <div class="item" @click="deleteList">
        <i class="iconfont icon-close"></i>
      </div>
    </el-tooltip>

  </div>
</template>

<script setup>
import { inject } from "vue"
import { useTaskStore } from "@/store/taskStore.js"
const taskStore = useTaskStore()

const params = inject('params')

// const props = defineProps({
//   params: {
//     type: Object,
//     default(){
//       return {}
//     }
//   }
// })

const refreshList = () => {
  console.log('refreshList', params.value)
  taskStore.getTaskList(params.value)
}


const startAll = () => {
  // 开始所有下载
  taskStore.startAll(params.value)
}

const stopAll = () => {
  console.log('stopAll')
  taskStore.stopAll(params.value)
}

const deleteList = ()=>{
  taskStore.deleteTasks(params.value)
}
</script>

<style lang="scss" scoped>
.btns {
  width: fit-content;
  padding: 5px 20px;
  @include background_color("bg_menu_base2");
  @include font_color("font_base_in");
  border-radius: 16px;

  .iconfont {
    cursor: pointer;
  }

  .item {
    width: 30px;
    text-align: center;
  }
}
</style>